<template>
    <div class="headBox">
        <div class="logoBox">
            <img src="~_assets/logo.png" class="logo" alt="logo">
            <span class="title">特瓦特活动管理系统</span>
        </div>
        <div class="infoBox">
            <select name="" id="selectPlate" @change="selectPlate">
                <option value="">请选择平台</option>
                <option :value="item.value" v-for="(item,index) in plateList" :key="index" v-text="item.name"></option>
            </select>
            <div class="msgBox" @click.stop="getMsg">
                <div>
                    <span class="msgImg"></span>
                    <span>消&nbsp;息</span>
                    <span class="redPoint" v-show="showRedPoint" v-text="msgNumbs"></span>
                </div>
            </div>
            <div style="position:relative">
              <i class="el-icon-user" style="font-size:16px;position:absolute;left:-20%;top:14%"></i>
              <span v-text="userId" class="userId"></span>
            </div>
            <img src="~_assets/logout.png" alt="退出" @click="logout">
        </div>
        <div class="alertMsg" v-show="showMsgBox">
            <div class="title rowMsg">消息盒</div>
            <div class="msgContent" v-if="hasMsg"  @click="toNews">
                <div class="oldMsg rowMsg" v-for="(item,index) in msgData" :key="index">
                    <!-- <span class="rowRed" v-show="showRedPoint"></span> -->
                    {{`'${item.activityTheme}'活动需要${actType(item.TasksMap.formKey)}`}}
                </div>
            </div>
            <div class="nomsgContent" v-else>
                <img src="~_assets/nomsg.png">
            </div>
            <div class="checkAll" @click="toNews">
                查看全部消息
            </div>
        </div>
    </div>
</template>
<script>
import Bus from "@/bus.js";
import { LOOK_MESSAGE } from "@/config/url";

export default {
  data() {
    return {
      msgNumbs: "0", //消息数量
      showRedPoint: false, //显示消息红点
      userId: localStorage.getItem("username"), //用户id
      plateIndex: 0, //选择的平台在列表的位置
      plateList: [
        {
          value: "101",
          name: "百度",
          url: "http://www.baidu.com"
        },
        {
          value: "102",
          name: "新浪",
          url: "http://www.sina.com"
        }
      ],
      msgData: null, //消息数据
      showMsgBox: false, //显示消息盒子
      hasMsg: false //是否有消息
    };
  },
  created() {
    let that = this;
    Bus.$off("closeAlert");
    Bus.$on("closeAlert", () => {
      if (that.showMsgBox) {
        that.getMsg();
      }
      // $('.dropdown-menu').hide()
    });
    Bus.$off("getMessage");
    Bus.$on("getMessage", () => {
      that.getMessage();
    });
  },
  mounted() {
    let that = this;
    this.getMessage();
  },
  methods:{
    toActivity(code){
        sessionStorage.setItem('activityCode',code)
        this.getMsg()
        this.$router.push('/settingIndex/newActivities')
    },
    toNews(){
        this.getMsg()
        Bus.$emit('selectTabAct',{
            newTab:'待办事项',
            oldTab:'活动设置'
        })
        this.$router.push('/news')
    },
    logout(){
        this.$router.push('/login')
    },
    getMsg(){
        this.showMsgBox = !this.showMsgBox
        if(this.showMsgBox){
            $('.msgBox').addClass('selectMsg')
        }else{
            $('.msgBox').removeClass('selectMsg')
        }
    },
    selectPlate(e){
      let selectedIndex = e.target.options.selectedIndex
      if(selectedIndex > 0){
          let a = document.createElement('a')
          a.href = this.plateList[selectedIndex-1].url
          a.target = '_blank'
          a.click()
      }
    },
    actType(type) {
      let typeName = "";
      if (type == "approveForm") {
        typeName = "审核";
      } else if (type == "secondForm") {
        typeName = "复录";
      } else {
        typeName = "查看";
      }
      return typeName;
    },
    getMsg() {
      this.showMsgBox = !this.showMsgBox;
      if (this.showMsgBox) {
        $(".msgBox").addClass("selectMsg");
      } else {
        $(".msgBox").removeClass("selectMsg");
      }
    },
    getMessage() {
      this.$fetch(LOOK_MESSAGE)
        .then(res => {
          if (res.status == 1) {
            if (res.data == "") {
              this.showRedPoint = false;
            } else if (res.data) {
              this.showRedPoint = true;
              this.hasMsg = true;
              this.msgData = res.data;
              this.msgNumbs =
                res.data[0].unLook > 99 ? "99+" : res.data[0].unLook;
            } else {
              this.hasMsg = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
}
</script>
<style lang="less" scoped>
@import "~_config/mixin.less";
.headBox {
  .wh(1920px,8vh);
  .bg(#fff);
  .bs();
  .fx(row,space-between,center);
  margin-bottom: 10px;
  padding: 0 60px;
  .logoBox {
    .fx(row,space-between,center);
    .logo {
      .wh(60px,42px);
      margin-right: 31px;
    }
    .title {
      .sc(26px,#002e72);
      letter-spacing: 3px;
    }
  }
  .infoBox {
    .fx(row,space-between,center);
    cursor: pointer;
    #selectPlate {
      .wh(248px,33px);
      border: 1px solid rgba(45, 51, 67, 1);
      border-radius: 8px;
      color: #9699a1;
      padding-left: 0.05rem;
    }
    .msgBox {
      height: 8vh;
      line-height: 8vh;
      margin-left: 60px;
      margin-right: 61px;
      width: 0.6rem;
      cursor: pointer;
      div {
        position: relative;
        .fx(row,center,center);
        .msgImg {
          .wh(20px,23px);
          margin-right: 10px;
          display: inline-block;
          background: url("~_assets/msg.png") no-repeat;
          background-size: 100%;
        }
        span {
          font-size: 16px;
        }
        .redPoint {
          transform: scale(0.7);
          width: 0.14rem;
          height: 0.13rem;
          text-align: center;
          padding: 1px;
          background: rgba(247, 67, 88, 1);
          border-radius: 50%;
          position: absolute;
          right: 9%;
          .sc(12px,#fff);
          .fx();
          top: 9%;
        }
      }
      // &:hover{
      //     .bg(#3395FF);
      //     color:#fff;
      //     .msgImg{
      //         background: url('~_assets/msg_s.png') no-repeat;
      //         background-size: 100%;
      //     }
      // }
    }
    .selectMsg {
      .bg(#3395ff);
      color: #fff;
      div .msgImg {
        background: url("~_assets/msg_s.png") no-repeat;
        background-size: 100%;
      }
    }
    .userId {
      .sc(18px,#000);
      display: inline-block;
      width: 95px;
      margin-right: 35px;
      text-align: center;
    }
  }
  .alertMsg {
    .wh(302px,324px);
    .bg(#fff);
    box-shadow: 0px 3px 7px 0px rgba(2, 78, 31, 0.35);
    border-radius: 0px 0px 8px 8px;
    position: absolute;
    right: 14.4%;
    top: 0.38rem;
    z-index: 8;
    .rowMsg {
      height: 46px;
      .fx(row,flex-start);
      padding-left: 31px;
      border-bottom: 1px solid #e0eef9;
    }
    .title {
      font-size: 16px;
      color: rgba(45, 51, 67, 1);
    }
    .oldMsg {
      .sc(14px,#333);
      cursor: pointer;
    }
    .newMsg {
      .sc(14px,#000);
      cursor: pointer;
    }
    .msgContent {
      height: 1.2rem;
      overflow-y: auto;
    }
    .nomsgContent {
      height: 1.2rem;
      .fx();
    }
    .checkAll {
      font-size: 16px;
      color: rgba(51, 149, 255, 1);
      .fx();
      height: 45px;
      cursor: pointer;
    }
    .rowRed {
      .wh(6px,6px);
      display: inline-block;
      background: rgba(247, 67, 88, 1);
      border-radius: 50%;
      margin-right: 4%;
    }
  }
}
</style>
